<template>
  <ul class="todo-list">
    <TodoListItem
      v-for="(todo, index) in todos"
      :key="todo.id"
      :todoItem="todo"
      @changeState="todo.completed = $event.target.checked"
      @delTodo="delTodo(index)"
    ></TodoListItem>
  </ul>
</template>

<script>
import TodoListItem from './TodoListItem.vue';

export default {
  name: 'TodoList',
  components: {
    TodoListItem,
  },
  props: ['todos', 'delTodo'],
};
</script>

<style>
/* todo-list */
.todo-list {
  display: grid;
  row-gap: 14px;
}
</style>
